<template>
  <div style="height: 70px;width: 100%;background: #aeb3c5;text-align: center;margin-bottom: 80px">
    <span style="color: white;line-height: 70px;font-size: 25px">统计销售</span>
  </div>
  <div>
    <div style="width: 100%; display: flex;justify-content: space-around">
      <div ref="pieDiv" style="width: 600px;height:400px;"></div>

      <div ref="pieInfoDiv" style="width: 600px;height:400px;"></div>
    </div>

    <h2 style="text-align: center;">查询销售统计信息</h2>
    <div style="display: flex;justify-content: space-evenly;margin-top: 80px">
      <div>起始日期
        <el-date-picker
            v-model="findObj.startDate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
        />
      </div>
      <div>结束日期
        <el-date-picker
            v-model="findObj.endDate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
        />
      </div>
      <div>
        <el-button type="success">查询</el-button>
      </div>
    </div>
  </div>


</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";

export default {
  data() {
    return {
      gradeList: [],
      typeList: [],
      productList: [],
      findObj: {},

    }
  },
  methods: {
    createPie() {//饼图
      var pieChart = echarts.init(this.$refs.pieDiv);
      var option = {
        title: {
          text: '销售类别统计',
          subtext: '2022-07-22',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },

        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '价格',
            type: 'pie',
            radius: '50%',
            data: this.typeList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(option);
    },
    Info() {
      var pieChart = echarts.init(this.$refs.pieInfoDiv);
      var option = {
        title: {
          text: '销售额统计',
          subtext: '2022-07-22',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '价格',
            type: 'pie',
            radius: '50%',
            data: this.gradeList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(option);
    },

    async findAll() {
      await axios.get("/project/countSell/findByItem", {params: this.findObj}).then(resp => {

        var list = resp.data;
        list.forEach(n => {
          let info = {};
          info.value = n.money;
          info.name = n.name;
          this.typeList.push(info);
        })
      });


      this.createPie();

    },
    async findProduct() {
      await axios.get("/project/countSell/findByProduct", {params: this.findObj}).then(resp => {

        var list = resp.data;

        list.forEach(n => {
          let info = {};
          info.value = n.money;
          info.name = n.name;
          this.gradeList.push(info);
        })
      });
      this.Info();
    },

  },
  mounted() {
    this.findAll();
    this.findProduct()
  },
  created() {

  }
}
</script>

<style scoped>

</style>